<<<<<<< HEAD
<template>
    <div>
        <!-- 标志 -->
        <div class="logoAndLogin">
            <div class="logo clearFix">
                <router-link to="/home" title="大众点评网">
                    <img src="@/assets/images/logo.png" alt="logo">
                </router-link>
                <span class="login">
                    登录
                </span>
            </div>
        </div>

        <!-- 登录 -->
        <div class="center">
            <div class="login-wrap">
                <div class="loginUp">
                    <i class="iconfont icon-erweima"></i>
                    <div class="loginUp-center clearFix">
                        <div class="shortcut">快捷登录</div>
                        <div class="password">手机密码登录</div>
                    </div>
                    <div class="input">
                        <select name="">
                            <option>中国 +86</option>
                            <option>香港(中国) +852</option>
                            <option>澳门(中国) +853</option>
                            <option>台湾(中国) +886</option>
                        </select>
                        <input placeholder="手机号" class="phone" v-model="phone" type="text">
                        <input placeholder="密码" class="password" v-model="password" type="text">
                        <a>忘记密码?</a>
                        <button @click="getLogin">登录</button>
                    </div>
                    <div class="other">
                        <i class="iconfont icon-QQ1"></i>
                        <i class="iconfont icon-weixin"></i>
                        <i class="iconfont icon-weibo"></i>
                        <span @click="goRegister">注册</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      phone: "", //手机号
      password: "", //密码
    };
  },
  methods: {
    //跳转到注册页面
    goRegister() {
      this.$router.push("/register");
    },

    //登录
    getLogin() {
      const { phone, password } = this;

      if (!phone.trim() || !/^[1][3-9]\d{9}$/.test(phone)) {
        this.$message({
          message: "手机号不符合规则",
          type: "info",
        });
        return;
      }
      if (!password) {
        this.$message({
          message: "密码不能为空",
          type: "info",
        });
        return;
      }
      this.$store.dispatch("getLogin", { phone, password });
    },
  },
  //在挂载后给 body 添加一个类名
  mounted() {
    document.querySelector("body").className = "loginOverall";
  },
  //卸载前将 body 的类名删除
  beforeDestroy() {
    document.body.removeAttribute("class", "loginOverall");
  },
};
</script>

<style lang="css" scoped>
body {
  overflow: hidden;
}

/* 标志样式 */
.logoAndLogin {
  margin: 20px 0;
}
.logoAndLogin .logo {
  width: 1190px;
  margin: 0 auto;
}
.logoAndLogin .logo a {
  display: block;
  float: left;
}
.logoAndLogin .logo a img {
  height: 40px;
}
.logoAndLogin .logo .login {
  float: left;
  font-size: 20px;
  border-left: 1px solid #dcdcdc;
  margin: 6px 0 0 25px;
  padding-left: 20px;
}

/* 中间登录样式 */
.center {
  height: 510px;
}
.center .login-wrap {
  width: 1190px;
  height: 100%;
  margin: 0 auto;
  background-image: url(~@/assets/images/loginBg.jpg);
}
.center .login-wrap .loginUp {
  width: 292px;
  height: 358px;
  background-color: #fff;
  float: right;
  margin: 76px 100px 0 0;
}
.center .login-wrap .loginUp .iconfont {
  float: right;
  margin-right: 6px;
  font-size: 40px;
  color: #ff6633;
}
.center .login-wrap .loginUp .loginUp-center {
  margin: 52px 20px 0;
}
.center .login-wrap .loginUp .loginUp-center .shortcut {
  float: left;
  color: #999999;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #eeeeee;
  padding: 0 25px 5px;
}
.center .login-wrap .loginUp .loginUp-center .password {
  float: right;
  color: #333333;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px #ff6633 solid;
  padding: 0 10px 5px;
}
.center .login-wrap .loginUp .input {
  width: 257px;
  padding: 30px 0;
  border-bottom: 1px dashed #e0e0e0;
  margin-left: 20px;
}
.center .login-wrap .loginUp .input select {
  width: 119px;
  height: 32px;
  float: left;
  border: 1px solid #cccccc;
}
.center .login-wrap .loginUp .input select:focus {
  outline: none;
  border: 1px solid #aaa;
}
.center .login-wrap .loginUp .input .phone {
  float: right;
  width: 90px;
  height: 31px;
  border: 1px solid #cccccc;
  padding: 0 18px;
}
.center .login-wrap .loginUp .input .phone:focus {
  outline: none;
  border: 1px solid #aaa;
}
.center .login-wrap .loginUp .input .password {
  width: 220px;
  height: 30px;
  padding: 0 18px;
  border: 1px solid #cccccc;
  margin-top: 15px;
}
.center .login-wrap .loginUp .input .password:focus {
  outline: none;
  border: 1px solid #aaa;
}
.center .login-wrap .loginUp .input a {
  display: block;
  line-height: 50px;
  font-size: 14px;
  float: right;
  margin-right: 15px;
}
.center .login-wrap .loginUp .input a:hover {
  text-decoration: underline;
}
.center .login-wrap .loginUp .input button {
  width: 256px;
  height: 34px;
  background-color: #ff6633;
  border: none;
  color: #fff;
  font-size: 14px;
}
.center .login-wrap .loginUp .other {
  width: 257px;
  margin: 15px 0 0 20px;
}
.center .login-wrap .loginUp .other .iconfont {
  font-size: 25px;
  float: left;
}
.center .login-wrap .loginUp .other .icon-weibo {
  color: #ff7c6d;
}
.center .login-wrap .loginUp .other .icon-weixin {
  color: #3bd043;
  margin: 0 15px;
}
.center .login-wrap .loginUp .other .icon-QQ1 {
  color: #35bafa;
}
.center .login-wrap .loginUp .other span {
  float: right;
  line-height: 36px;
  font-size: 16px;
}
</style>